<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>订单</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
				color: #000000;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			.select{
				width: 40px;
				height: 2px;
				background-color: #DBA817;
				display: block;
				margin-left: 12px;
				margin-top: 2px;
			}
			
		</style>
		<script type="text/javascript">
		function DangQianDingDan()
		{
			document.getElementById("lishidingdan").style.color="#000000";
			document.getElementById("dangqiandingdan").style.color="#DBA817";
			document.getElementById("lishidingdanspan").classList.remove("select");
			document.getElementById("dangqiandingdanspan").classList.add("select");
			document.getElementById("divlishidingdan").style.display="none";
			document.getElementById("divdangqiandingdan").style.display="";
		}
		function LiShiDingDan()
		{
			document.getElementById("dangqiandingdan").style.color="#000000";
			document.getElementById("lishidingdan").style.color="#DBA817";
			document.getElementById("lishidingdanspan").classList.add("select");
			document.getElementById("dangqiandingdanspan").classList.remove("select");
			document.getElementById("divlishidingdan").style.display="";
			document.getElementById("divdangqiandingdan").style.display="none";
		}
		</script>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px;width: 100%;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>

				<div style="display: flex;justify-content: space-around;height: 40px;align-items: center;background-color: rgb(255 240 243);width: 100%;">
					<div style="color: #DBA817;cursor: pointer;" id="dangqiandingdan" onclick="DangQianDingDan();">
						当前订单
						<span id="dangqiandingdanspan" class="select"></span>
					</div>
					<div style="cursor: pointer;" id="lishidingdan" onclick="LiShiDingDan();">
						历史订单
						<span id="lishidingdanspan"></span>
					</div>
				</div>
				<div id="divdangqiandingdan" style="margin-top: 20px; width: 100%;">
					<div style="border: 1px solid #EEEEEE;background-color: rgb(255 240 243);cursor: pointer;">
						<a href="OrderDetail.html">
							<div style="padding: 10px 20px;display: flex;justify-content: space-between;">
								<div>
									悠方购物中心
									<p style="color: #afafaf;font-size: 12px;">2020-10-22 16:19:20</p>
								</div>
								<div style="color: #afafaf;font-size: 14px;">已完成</div>
							</div>
							<div style="display: flex;justify-content: space-between;height: 90px;align-items: center;padding: 0 20px;">
								<img src="image/icon/dingdanimg.png" alt="" style="width: 60px;height: 60px;">
								<div>
									<p>￥18</p>
									<div style="color: #afafaf;font-size: 12px;">共1件</div>
								</div>
							</div>
						</a>
						<div style="text-align: right;padding-right: 20px;font-size: 12px;color: #686363;height: 35px;">
							<a style="text-decoration: none;border: 1px solid #C3C3C3;padding: 2px 5px;" href="OrderDetail.html">开发票</a>
							<a style="text-decoration: none;border: 1px solid #C3C3C3;padding: 2px 5px;background-color: rgb(255 226 232);border: 1px solid rgb(240 196 178);color:#f5895d;">再来一单</a>
						</div>
					</div>
					<div style="text-align: center;margin-top: 10px;font-size: 13px;color: #acabab;">
						没有更多了~
					</div>
				</div>
				<div id="divlishidingdan" style="margin-top: 20px;display: none;">
					<div style="border: 1px solid #EEEEEE;background-color: rgb(255 240 243);cursor: pointer;">
						<a href="OrderDetail1.html">
							<div style="padding: 10px 20px;display: flex;justify-content: space-between;">
								<div style="">
									美年广场GO店
									<p style="color: #afafaf;font-size: 12px;">2020-10-22 16:19:20</p>
								</div>
								<div style="color: #afafaf;font-size: 14px;">已取消</div>
							</div>
							<div style="display: flex;justify-content: space-between;height: 90px;align-items: center;padding: 0 20px;">
								<div>
									<img src="image/icon/dingdanimg3.png" alt="" style="width: 60px;height: 60px;">
									<img src="image/icon/dingdanimg2.png" alt="" style="width: 60px;height: 60px;">
								</div>
								<div>
									<p>￥48</p>
									<span style="color: #afafaf;font-size: 12px;">共2件</span>
								</div>
							</div>
						</a>
						<div style="text-align: right;padding-right: 20px;font-size: 12px;color: #686363;height: 35px;">
							<a style="text-decoration: none;border: 1px solid #C3C3C3;padding: 2px 5px;background-color: rgb(255 226 232);border: 1px solid rgb(240 196 178);color:#f5895d;">再来一单</a>
						</div>
					</div>
					<div style="text-align: center;margin-top: 10px;font-size: 13px;color: #acabab;">
						没有更多了~
					</div>
				</div>
				
				<div style="position: fixed;width: 396px;bottom: 10px;background-color: #ffffff;height: 50px;">
					<ul style="display: flex;justify-content: space-around;">
						<li style="width: 30px;text-align: center;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="index.html">
								<i style="background-image: url(image/icon/shouye.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color: #908f8f;">首页</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="diandan.html">
								<i style="background-image: url(image/icon/diandan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f ;">点单</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="baihuo.html">
								<i style="background-image: url(image/icon/baihuo.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">百货</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;">
							<i style="background-image: url(image/icon/dingdan1.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
							<p style="font-size: 12px;color:#000000;">订单</p>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="wode.html">
								<i style="background-image: url(image/icon/wode.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">我的</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>